<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">

    <link href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
    <script src="//cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
    <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

    <link href="/stylesheets/bootstrap-switch.min.css" rel="stylesheet">
    <link href="/stylesheets/style.css" rel="stylesheet">
    <script src="/javascripts/lib/bootstrap-switch.min.js"></script>
    <script src="/javascripts/common.js"></script>
    <script src="/javascripts/accountController.js"></script>

    <title>司机端|订单列表</title>
</head>
<body style="background-color: #eee">
<input type="hidden" id="userId" value="{{id}}"/>
<input type="hidden" id="driverName" value="{{real_name}}"/>
<input type="hidden" id="tel" value="{{tel}}"/>
<input type="hidden" id="carId" value="{{car_info}}"/>

<div>
    <div style="background-color: #FF7F00;position: absolute;top: 0;height: 40px;width: 100%">
        <p style="color: #FFFAFA;text-align: center;font-size: 14px;border: 8px solid #FF7F00;">
            <b>订&nbsp;单&nbsp;列&nbsp;表&nbsp;</b></p>
    </div>

    <div style="margin-top: 60px;">
        <div class="container">
            <label class="control-label info-label col-sm-4 col-xs-4">营业状态</label>
            <div class="col-sm-8 col-xs-8 ">
                <input id="status" type="checkbox" data-handle-width="50" data-on-text="营业" data-off-text="收车"
                       data-on-color="success" data-off-color="danger"/>
            </div>
        </div>

        <div class="sub-menu container" style="margin-top: 20px;background-color: transparent;padding: 0">
            <div id="realTime" class="dark-shadow sub-menu-item menu-border col-xs-6 col-sm-6" style="color: #FF3333">
                实时订单
            </div>
            <div id="pieceOrder" class="sub-menu-item menu-border col-xs-6 col-md-6" style="color: #333">拼车订单</div>
        </div>

        <div class="real-time">
            <ul class="container list-group margin-top real-list" style="text-align: center;padding: 0">
                <div class="list-group-item no-order">暂无实时订单</div>
            </ul>
        </div>

        <div class="piece-order">
            <div class="container">
                <!-- 1. wiseOrder / allOrder 2. ul  -->
            </div>
        </div>

    </div>

    <div class="bottom-menu">
        <a href="/driver/index">&nbsp;订单列表&nbsp;&nbsp;&nbsp;</a><span>|</span>
        <a href="/driver/userCenter">&nbsp;&nbsp;个人中心&nbsp;</a><span>|</span>
        <a href="javascript:void(0)" id="logout">&nbsp;&nbsp;注销&nbsp;</a>
    </div>
</div>

<div class="modal fade modal-order">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">乘客信息</h4>
            </div>
            <div class="modal-body">
                <div>乘客称呼:<span id="customerName"></span></div>
                <div>乘客号码:<span id="customerTel"></span></div>
                <div>出发时间:<span id="start_time"></span></div>
                <div id="end_container" style="display: none">返程时间:<span id="end_time"></span></div>
                <div>金额:<span id="price"></span></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<script src="http://blog.faultylabs.com/files/md5.js"></script>
<script src="http://webapi.openspeech.cn/socket.io/socket.io.js"></script>
<script src='http://webapi.openspeech.cn/fingerprint.js'></script>
<script src="http://webapi.openspeech.cn/tts.min.js"></script>
<script src="/javascripts/lib/voice.js"></script>
<script>
    Date.prototype.Format = function (fmt) {
        var o = {
            'M+': this.getMonth() + 1, //月份
            'd+': this.getDate(), //日
            'h+': this.getHours(), //小时
            'm+': this.getMinutes(), //分
            's+': this.getSeconds(), //秒
            'q+': Math.floor((this.getMonth() + 3) / 3), //季度
            'S': this.getMilliseconds()//毫秒
        };
        if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + '').substr(4 - RegExp.$1.length));
        for (var k in o)
            if (new RegExp('(' + k + ')').test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)));
        return fmt;
    };

    var socket = io.connect('http://{{ server_url }}:8080');
    socket.emit('online', {
        id: $("#userId").val(),
        driverName: $("#driverName").val(),
        tel: $("tel").val(),
        carId: $("carId").val(),
        status: false
    });

    $("#realTime").click(function () {
        $(this).addClass("dark-shadow");
        $("#pieceOrder").removeClass("dark-shadow");
        $(".real-time").show(300);
        $(".piece-order").hide(300);
    });

    $("#pieceOrder").click(function () {
        $(this).addClass("dark-shadow");
        $("#realTime").removeClass("dark-shadow");
        $(".real-time").hide(300);
        $(".piece-order").show(300);
    });

    $("#logout").click(function () {
        $.cookie("userId", '');
        $.cookie("uuId", "");
        $.cookie("userName", '');
        window.location.href = "/driver/login";
    });

    $("#status").bootstrapSwitch();

    var running = false;
    $("#status").on('switchChange.bootstrapSwitch', function (event, data) {
        running = data;
        socket.emit('changeStatus', {id: $("#userId").val(), running: data});
    });

    var typeMap = {
        "RENT_NO_DRIVER": "公务包车(自驾)",
        "RENT_WITH_DRIVER": "公务包车",
        "TRAVEL_RENT": "旅游包车",
        "GO_AIRPORT": "送机",
        "OFF_AIRPORT": "接机",
        "PIECE": "拼车"
    };

    socket.on('getOrder', function (data) {
        data.order_type_str = typeMap[data.order_type];

        $(".no-order").remove();
        var startAddr = (data.start_addr.name.length > 20) ? (data.start_addr.name.substring(0,18)+"...") : data.start_addr.name;
        var endAddr = data.end_addr.name.length > 20 ? data.end_addr.name.substring(0,18)+"..." : data.end_addr.name;
        $(".real-list").prepend('<li id="'+ data.id+'" class="list-group-item" style="min-height: 65px;text-align: left;padding:5px 0;">\
        <div class="col-sm-12 col-xs-12 no-padding-l">出发地：<span style="color:#F03">' + startAddr + '</span></div>\
        <div class="col-sm-12 col-xs-12 no-padding-l">目的地：<span style="color:#F03">' + endAddr + '</span></div>\
        <div class="col-sm-6 col-xs-6 no-padding-l">出发时间：<span style="color:#F03">' + new Date(data.start_time).Format("MM-dd hh:mm") + '</span></div>\
        <div class="col-sm-4 col-xs-4 no-padding-l">类型：<span style="color:#F03">' + data.order_type_str + '</span></div>\
        <button onclick="grab(\'' + data.id + '\')" id="grab' + data.id + '" class="col-sm-2 grab col-xs-2 btn btn-warning btn-xs" style="position: relative;top:-5px;left:-5px;">抢单</button>\
        </li>');
        if(!data.init) {
        play("实时,从" + data.start_addr.name + "到" + data.end_addr.name + ",于" +
                new Date(data.start_time).Format("MM月dd日 hh点mm分") + "出发");
        }
    });

    function grab(id) {
        if(!running) {
            window.utils.toast("error", "请先进入营业状态");
        }
        $.post("/driver/order", {orderId: id}, function (data) {
            if (data && data.order) {
                window.utils.toast("success", "抢单成功");
                console.log(data.order);
            } else {
                console.log(data);
                $("#"+data.id).remove();
                window.utils.toast("error", data);
            }
        });
    }
</script>

</body>
</html>